<template>
  <div id="search-results">
    <my-scrollbar>
      <results-title
        :count="count"
        :titles="[ '单曲', '歌手', '专辑', '视频', '歌单' ]"
        :currentIndex="currentIndex"
        @titleClick="titleClick"/>
      <results-songs :songs="songs" v-if="currentIndex === 0"/>
      <results-singers :artists="artists" v-else-if="currentIndex === 1"/>
      <results-albums :albums="albums" v-else-if="currentIndex === 2"/>
      <results-movies :mvs="mvs" v-else-if="currentIndex === 3"/>
      <results-playlists :playlists="playlists" v-else-if="currentIndex === 4"/>
      <!-- <div style="height: 1000px; backgroundColor: pink"></div> -->
    </my-scrollbar>
  </div>
</template>

<script>
import MyScrollbar from 'components/content/perfectscrollbar/MyScrollbar.vue'
import ResultsTitle from './childrenCpns/ResultsTitle.vue'
import ResultsSongs from './childrenCpns/ResultsSongs.vue'
import ResultsSingers from './childrenCpns/ResultsSingers.vue'
import ResultsAlbums from './childrenCpns/ResultsAlbums.vue'
import ResultsMovies from './childrenCpns/ResultsMovies.vue'
import ResultsPlaylists from './childrenCpns/ResultsPlaylists.vue'

export default {
  name: 'SearchResults',
  data () {
    return {
      currentIndex: 0,
      songs: null,
      albums: null,
      artists: null,
      mvs: null,
      playlists: null,
      count: 0,
      typesRefer: [1, 100, 10, 1004, 1000]
    }
  },
  components: {
    MyScrollbar,
    ResultsTitle,
    ResultsSongs,
    ResultsSingers,
    ResultsAlbums,
    ResultsMovies,
    ResultsPlaylists
  },
  computed: {
    keywords () {
      return this.$route.query.keywords
    }
  },
  watch: {
    keywords () {
      this.handleKeywordsChange()
    }
  },
  created () {
    this._getSearchResults()
  },
  methods: {
    // 1. 获取搜索结果
    async _getSearchResults () {
      const result = await this.$http.get('/search', {
        params: {
          keywords: this.$route.query.keywords,
          limit: 30,
          type: this.typesRefer[this.currentIndex]
        }
      })
      if (result.status !== 200 || result.data.code !== 200) return this.$message.ingo('获取搜索结果失败')
      console.log(result)
      // 获取成功
      switch (this.typesRefer[this.currentIndex]) {
        case 1:
          this.songs = result.data.result.songs
          this.count = result.data.result.songCount
          break
        case 100:
          this.artists = result.data.result.artists
          this.count = result.data.result.artistCount
          break
        case 10:
          this.albums = result.data.result.albums
          this.count = result.data.result.albumCount
          break
        case 1004:
          this.mvs = result.data.result.mvs
          this.count = result.data.result.mvCount
          break
        case 1000:
          this.playlists = result.data.result.playlists
          this.count = result.data.result.playlistCount
          break
      }
    },
    // 2. 标题被点击
    titleClick (index) {
      this.currentIndex = index
      this._getSearchResults()
    },
    // 3. 处理keywords变化的函数
    handleKeywordsChange () {
      this._getSearchResults()
    }
  }
}
</script>

<style scoped lang="less">
#search-results {
  width: 100%;
  height: 100%;
}
</style>
